<template>
    <div class="trans">
        <section class="order-main-header">
            <mt-header title="划转">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
      <section class="trans-card otc">
             <section class="order-list">
               <div class="padding">
                   <div class="flex-right " v-if="otcRotate">
                       <div class=" flex-center flex-between " >
                           <span class="otc-color">从</span>
                              <span class="otc-color input">{{startAccount}}</span>
                               <div class="rotate">  <img @click="sheetVish()" src="../../assets/my/right.png"></div>
                       </div>
                       <div  class=" flex-center flex-between ">
                           <span class="otc-color"> 到</span>
                            <span  class="otc-color input">{{endAccount}}</span>
                             <div class="rotate">  <img @click="sheetEndVish()" src="../../assets/my/right.png"></div>
                       </div>
                   </div>
                    <div class="flex-right " v-if="!otcRotate">
                       <div class=" flex-center flex-between">
                           <span class="otc-color">从</span>
                              <span class="otc-color input">{{endAccount}}</span>
                               <div class="rotate">  <img @click="sheetVish()" src="../../assets/my/right.png"></div>
                       </div>
                       <div  class=" flex-center flex-between">
                           <span class="otc-color"> 到</span>
                            <span  class="otc-color input">{{startAccount}}</span>
                             <div class="rotate">  <img @click="sheetEndVish()" src="../../assets/my/right.png"></div>
                       </div>
                   </div>
                     <div class="flex-left flex-all-center">
                         <img src="../../assets/change.png" @click="roateChange()">
                   </div>
               </div>
            </section>
        </section>
        <section  class="trans-order">
               <div class="trade-order">
                    <div class="trade-order--content" id="order-list" >
                        <div class="max-order flex-center flex-between">
                           <span class="black">币种</span>
                              <span class="black-order">USDT</span>
                        </div>
                        <div class="max-order flex-center flex-between">
                           <span class="black">划转数量</span>
                           <input  type="number" placeholder=""  v-model="otcNumber">
                            <span class="black-order" @click="totalCoin()">全部</span>
                        </div>
                         <div class="user-order flex-center max-order">
                           <span class="total">可用 {{totalAssetsNumber.total}}</span>
                        </div>
                        <div class="flex-all-center ">
                            <button class="btn" @click="setTransfer()">确定</button>
                        </div>
                    </div>
            </div>
        </section>
        <mt-actionsheet
        :actions="actions"
       v-model="sheetVisible">
        </mt-actionsheet>
        <mt-actionsheet
        :actions="endActions"
       v-model="sheetEndVisible">
        </mt-actionsheet>
    </div>
</template>
<script>
import { Actionsheet } from 'mint-ui';
import { Toast } from 'mint-ui';
import axios from 'axios'
// import { float } from 'html2canvas/dist/types/css/property-descriptors/float';
export default {
    name:'',
   data(){
         return {
             account:true,
             coinUser:'',
             otcRotate:true,
             balancesList:'',
             otcNumber:'',
             totalAssetsNumber:'',
          actions: [{
        name: '币币账户',
        method :this.coinRecond
      }, {
        name: '法币账户', 
        method :this.otcRecond
        }],
          endActions: [{
        name: '币币账户',
        method :this.coinEndRecond
      }, {
        name: '法币账户', 
        method :this.coinEndRecond
        }],
        sheetVisible:false,
        sheetEndVisible:false,
        startAccount:'币币账户',
        endAccount:'法币账户',
         }
    },
    watch:{

    },
    mounted() {
    this.totalAssets();
    this.getBalancesList();
    },
    methods: {
        coinRecond(){

        },
        otcRecond(val){
            this.startAccount=val.name;
        },
        coinEndRecond(val){
         this.endAccount=val.name;
        },
        totalCoin(){
            this.otcNumber=this.totalAssetsNumber.total
        },
        setTransfer(){
            let param={
            coinId:this.balancesList[0].id,
            amount:this.otcNumber,
            type:0,
            contractId:""
            }
        this.$http.post("v1/account/theTurn",{}).then(res=>{
                 console.log(res.data);
                 let data=res.data;
                  if (data.code == 200) {
                        Toast('资产划转成功')
                    } else if (data.code == 20) {
                        Toast('划转金额不可小于限额')
                    } else if (data.code == 21) {
                        Toast('余额不足，请充值')
                    } else if (data.code == 23) {
                        Toast(lang.error)
                    }
             })
        },
        roateChange(){
            this.otcRotate=!this.otcRotate;
        },
         getBalancesList(){
             this.$http.post("v1/account/balances").then(res=>{
                 console.log(res.data);
                 this.balancesList=res.data.data;
             })
        },
        totalAssets(){
             this.$http.post("v1/account/TotalAssets").then(res=>{
                 this.totalAssetsNumber=res.data.data;
             })
        },
        sheetEndVish(){
        this.sheetEndVisible=!this.sheetEndVisible
        },
        sheetVish(){
            this.sheetVisible=!this.sheetVisible
        },
        　　handleClose(){
                this.$router.go(-1);
            },
    }
}
</script>
<style lang="less" scoped>
.trans-card .start{
    position: relative;
    top: 110px;
}
.trans-card .end{
    position: relative;
    top:  -80px;
}
.trans{
    background: #222240;
    height: 100%;
    .otc-color{
        color: #5298F1;
        font-size: 30px;
    }
}
.trans-order{
    .black{
        color: #8686C0;
        width: 200px;
        padding-left: 40px;
        text-align: left;
    }
    .black-order{
         color: #8686C0;
        width: 200px;
        padding-right: 40px;
        text-align: right;
    }
    .total{
         width: 100%;
        padding-left: 40px;
        text-align: left;
        color: #5298F1;
    }
}
.trade-order--content{
    color: #8686C0;
}
.mint-header{
    height: 100px;
    font-size: 32px;
    background: #222240;
    color: #E0E0F9
}
.flex-right{
    width: 90%;
}
.max-order{
    border:1px solid #161736;
    height: 120px;
    line-height: 40px;
}
.order-list .input,.trans-order input{
    outline: none;
    border: 0px solid;
    font-size: 24px;
    width: 80%;
    height: 88px;
    line-height: 88px;
    font-size: 28px;
    border-radius: 5px;
    border: none;
    padding: 0 30px;
    box-sizing: border-box;
    background-color: #222240;
    color: #8686E1;
}
.user-order{
    margin-bottom: 30px;
    .black{
    color: #5298F1;
    }
}
 .order-list{
        width: 100%;
            margin-left: auto;
            margin-right: auto;
            height: 220px;
            background: #222240;
            border-radius:8px;
             border-top:10px solid #161736;
    border-bottom:10px solid #161736;
    }
     section .padding, section  .padding{
    margin-top: 20px;
    margin-bottom: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%;
border-radius:4px;
padding-left: 45px;
padding-right: 25px;
}
.flex-center{
    display: flex;
    align-items: center;
}
.flex-all-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.trans-order button {
    width: 630px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    height:86px;
    background:rgba(82,152,241,1);
    border-radius:10px;
    margin-top: 30px;
    color: #fff;
}
.rotate img{
    transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-mz-transform:rotate(-180deg);
width: 36px;
height: 36px;
}
.flex-between{
      display: flex;
        justify-content: space-between;
    }
</style>